<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">待处理申请</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <div class="p_bodays">
            <div class="search_icon">
                <form action="/">
                    <van-search v-model="phoneNo" shape="round" :show-action = "false" placeholder="请输入手机号" @search="onSearch" @cancel="onCancel" />
                </form>
            </div>

            <div class="typexuanxiang">
                <div class="weichuli" :class="actives == 1 ? 'activewsub' :''" @click="coonter(1)">未处理</div>
                <div class="weichuli inester":class="actives == 2 ? 'activewsub' :''" @click="coonter(2)">已拒绝</div>
            </div>

            <div class="commtent" v-for="(item,index) in reviewsList" :key="index">
                <div class="tabletb">
                    <div class="icon">
                        <img src="../../../static/images/icon-team.png" alt="">
                    </div>
                    <div class="texter">申请加入：{{item.teamName}}</div>
                </div>
                <div class="tabletb">
                    <div class="icon">
                        <img src="../../../static/images/icon-phone-blue.png" alt="">
                    </div>
                    <div class="texter">申请手机号：{{item.phoneNo}}</div>
                </div>
                <div class="tabletb">
                    <div class="icon">
                        <img src="../../../static/images/icon-time.png" alt="">
                    </div>
                    <div class="texter">申请时间：{{timeFormat(item.lastUpdateTime)}}</div>
                </div>
                <div class="tabletb">
                    <div class="icon">
                        <img src="../../../static/images/icon-bzxx.png" alt="">
                    </div>
                    <div class="texter">申请信息：{{item.review.changeDescribe}}</div>
                </div>
                <div class="tabletb">
                    <div class="icon">
                        <!-- <img src="../../../static/images/icon-team.png" alt=""> -->
                    </div>
                    <div class="texter">邀请人：{{item.inviteName}}</div>
                </div>

                <div class="bottom">
                    <div class="caozuo" v-if="actives == 1">
                        <div class="jujue" @click="refuse(item.id)">拒绝</div>
                        <div class="tongyi" @click="consent(item.id)">同意</div>
                    </div>
                    <div v-if="actives == 2" class="jujuetitle">操作时间：{{item.resultReviewAt}}5</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant';
import { Dialog } from 'vant';
import { Notify } from 'vant';
import api from '../../api/managemenTteam'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            actives:1,
            value: '',

            reviewStatus:'WAIT',
            reviewResult:'',
            reviewsList:[],
            phoneNo:'',
        }
    },
    mounted(){
        this.reviews()
    },
    methods:{
        reviews(){
            let data = {
                phoneNo:this.phoneNo,//
                agencyTeamId:'',//团队ID
                reviewStatus:this.reviewStatus,//审核状态
                reviewResult:this.reviewResult,//审核结果
            }
            this.$api.reviewscha(data).then((res)=>{
                console.log(res);
                if(res.status == '0000'){
                    this.reviewsList = res.payload.content
                }
            })
        },
        // 时间戳转日期
        timeFormat(timestamp){
            var time = new Date(timestamp);
            var year = time.getFullYear();
            var month = time.getMonth()+1;
            var date = time.getDate();
            var hours = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();
            return year +'-'+ month + '-' + date +' '+ hours + ':' + minutes + ':' + seconds;
        },

        // 拒绝
        refuse(id){
            Dialog.confirm({
                title: '提示',
                message: '是否拒绝',
            })
            .then(() => {
                // on confirm
                let data = {
                    id:id,//id
                    result:'REJECTED',//审核结果
                    resultDescribe:'拒绝',
                }
                this.$api.league(data).then((res)=>{
                    console.log(res);
                    if(res.status == '0000'){
                        Notify({ type: 'success', message: '已拒绝' });
                        this.reviews()
                    }else{
                        Notify({ type: 'warning', message: res.describe })
                        this.reviews()
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
        },
        // 同意
        consent(id){
            Dialog.confirm({
                title: '提示',
                message: '是否同意',
            })
            .then(() => {
                // on confirm
                let data = {
                    id:id,//id
                    result:'RESOLVE',//审核结果
                    resultDescribe:'同意',
                }
                this.$api.league(data).then((res)=>{
                    console.log(res);
                    if(res.status == '0000'){
                        Notify({ type: 'success', message: '已同意' });
                        this.reviews()
                    }else{
                        Notify({ type: 'warning', message: res.describe })
                        this.reviews()
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
        },

        onSearch(val) {
            this.reviews();
            // Toast(val);
        },
        onCancel() {
            Toast('取消');
        },
        coonter(e){
            if(e == '1'){
                this.reviewStatus = 'WAIT';
                this.reviewResult = ''
            }
            if(e == '2'){
                this.reviewResult = 'REJECTED'
                this.reviewStatus = '';
            }
            this.actives = e
            this.reviews();
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .p_bodays{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }
    .search_icon{
        width: 100%;
        height: 40px;
    }
    .van-search{
        width: 100%;
        /* height: 44px; */
        border-radius: 20px;
        background: #FFFFFF !important;
        padding: 0 !important;
    }
    .van-search__content{
        background: #FFFFFF !important;
    }


    .typexuanxiang{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
    }
    .weichuli{
        width: 120px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #E0E0E0;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .inester{
        margin-left: 8px;
    }
    .activewsub{
        background: #3288FF;
        color: #fff;
    }

    .commtent{
        width: 100%;
        border-radius: 4px;
        background: #FFFFFF;
        padding: 16px 16px 0 16px;
        box-sizing: border-box;
        margin-top: 24px;
    }

    .tabletb{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .tabletb>.icon{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tabletb>.icon>img{
        width: 100%;
        height: 100%;
    }

    .tabletb>.texter{
        width: 90%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }

    .bottom{
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #F2F2F2;
    }
    .caozuo{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .jujue{
        width: 80px;
        height: 32px;
        border-radius: 4px;
        background: #EB5757;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tongyi{
        width: 80px;
        height: 32px;
        border-radius: 4px;
        background: #3288FF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 60px;
    }
    .jujuetitle{
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
</style>